<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import type { TableInstance } from 'element-plus'
import http from '@/http'
import { onMounted, reactive, ref } from 'vue'
import Cookies from 'universal-cookie'
import { useUserStore } from '@/stores/user'
import { pa, tr } from 'element-plus/es/locale'
import Index from './Index.vue'
import { i } from 'vite/dist/node/types.d-jgA8ss1A'
interface User {
  id: number
  date: string
  name: string
  address: string
}
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])
const selectable = (row: User) => ![1, 2].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const tableData = ref()
const form = reactive({
  medicinesName: '',
  keywords: '',
  medicinesType: '',
  producterName: '',
  prescriptionType: '',
  status: ''
}
)
const pageNum = ref(3)
const pageSize = ref(6)
function select() {
  http.get("/sm/pageInfo", {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      medicinesName: form.medicinesName,
      keywords: form.keywords,
      medicinesType: form.medicinesType,
      producterName: form.producterName,
      prescriptionType: form.prescriptionType,
      status: form.status
    }
  }).then((ref) => {
    tableData.value = ref.list
  })
}
onMounted(() => {
  select()
})
// 查询生产厂家
const changjiaName=ref()
http.get("/sp/all").then((ref)=>{
changjiaName.value=ref
})
console.log(changjiaName+'厂家名字daiai')
</script>
<template>
  <el-form :inline="true" class="demo-form-inline">
    <el-form-item label="药品名称">
      <el-input placeholder="请输入药品姓名" clearable v-model="form.producterName" />
    </el-form-item>
    <el-form-item label="关键字">
      <el-input placeholder="请输入关键字" clearable v-model="form.keywords" />
    </el-form-item>
    <el-form-item label="药品类型">
      <el-select placeholder="可用状态" clearable v-model="form.status">
        <el-option label="中草药" value="1" />
        <el-option label="西草药" value="2" />
        <el-option label="印草药" value="3" />
        <el-option label="美草药" value="4" />
        <el-option label="日草药" value="5" />
        <el-option label="俄草药" value="6" />
        <el-option label="法草药" value="7" />
        <el-option label="天草" value="8" />
      </el-select>
    </el-form-item>
    <el-form-item label="生产厂家">
      <el-select placeholder="生产厂家" clearable v-model="form.status">
        <el-option label="producterName" value="1" v-for="t in tableData" />
      </el-select>
    </el-form-item>
    <el-form-item label="处方类型">
      <el-select placeholder="处方类型" clearable v-model="form.status">
        <el-option label="中药处方" value="1" />
        <el-option label="西药处方" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker type="date" placeholder="创建时间" clearable v-model="form.createTime" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="select()">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button @click="reset()">重置</el-button>
    </el-form-item>
  </el-form>
  <div class="mb-4" style="margin-top: 5px;">
    <el-button type="primary" style="width: 200px;" @click="tiann()">+添加</el-button>
  </div>
  <!-- 表格 -->
  <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%">1
    <el-table-column type="selection" :selectable="selectable" width="55" @selection-change="handleSelectionChange" />
    <el-table-column property="medicinesId" label="药品ID" width="100" />
    <el-table-column property="medicinesName" label="药品名称" width="140" />
    <el-table-column property="medicinesNumber" label="药品编号" />
    <el-table-column property="producterName" label="生产厂家" width="180" />
    <el-table-column label="药品类型">
      <template #default="scope">
        <span v-if="scope.row.medicinesType == 1">中草药</span>
        <span v-else-if="scope.row.medicinesType == 2">西草药</span>
        <span v-else-if="scope.row.medicinesType == 3">印草药</span>
        <span v-else-if="scope.row.medicinesType == 4">美草药</span>
        <span v-else-if="scope.row.medicinesType == 5">日草药</span>
        <span v-else-if="scope.row.medicinesType == 6">俄草药</span>
        <span v-else-if="scope.row.medicinesType == 7">法草药</span>
        <span v-else-if="scope.row.medicinesType == 8">天草</span>
      </template>
    </el-table-column>
    <el-table-column label="处方类型">
      <template #default="scope">
        <span v-if="scope.row.prescriptionType == 1">中药处方</span>
        <span v-else-if="scope.row.prescriptionType == 2">西药处方</span>
      </template>
    </el-table-column>
    <el-table-column property="unit" label="单位" />
    <el-table-column property="prescriptionPrice" label="处方价格" />
    <el-table-column property="medicinesStockNum" label="库存量" />
    <el-table-column property="medicinesStockDangerNum" label="预警值" />
    <el-table-column property="conversion" label="换算量" />
    <el-table-column label="操作" #default="scope">
      <span style="color: red;" @click="update(scope.$index, scope.row)">修改</span>
    </el-table-column>
  </el-table>

  <div style="margin-top: 20px;"></div>
  <!-- 分页 -->
  <el-row justify="center">
    <el-col :span="12" :offset="6">
      <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="pageSize"
        v-model:current-page="pageNum" @current-change="handleCurrentChange" />
    </el-col>
  </el-row>
  <!-- 修改框 -->
  <el-dialog v-model="dialogFormVisible" title="修改" width="800">
    <el-form :model="formm">
      <el-form-item label="厂家名称" :label-width="formLabelWidth" v-model="formm.producterName">
        <el-input v-model="formm.producterName" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="厂家编码" :label-width="formLabelWidth" v-model="formm.producterCode">
        <el-input v-model="formm.producterCode" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="联系人" :label-width="formLabelWidth" v-model="formm.producterPerson">
        <el-input v-model="formm.producterPerson" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth" v-model="formm.producterTel">
        <el-input v-model="formm.producterTel" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="关键字" :label-width="formLabelWidth" v-model="formm.keywords">
        <el-input v-model="formm.keywords" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth" v-model="formm.producterAddress">
        <el-input v-model="formm.producterAddress" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio-group v-model="formm.status">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click=up()>修改</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加 -->
  <el-dialog v-model="tian" title="添加" width="800" :show-close="false">
    <el-form :model="formm">
      <el-form-item label="厂家名称" :label-width="formLabelWidth" v-model="formm.producterName">
        <el-input v-model="formm.producterName" autocomplete="off" style="width: 400px;"
          aria-required="" />&nbsp;&nbsp;<span style="color: red;" v-html="kong.producterName"></span>
      </el-form-item>
      <el-form-item label="厂家编码" :label-width="formLabelWidth" v-model="formm.producterCode">
        <el-input v-model="formm.producterCode" autocomplete="off" style="width: 400px;" />&nbsp;&nbsp;<span
          style="color: red;" v-html="kong.producterCode"></span>
      </el-form-item>
      <el-form-item label="联系人" :label-width="formLabelWidth" v-model="formm.producterPerson">
        <el-input v-model="formm.producterPerson" autocomplete="off" style="width: 400px;" />&nbsp;&nbsp;<span
          style="color: red;" v-html="kong.producterPerson"></span>
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth" v-model="formm.producterTel">
        <el-input v-model="formm.producterTel" autocomplete="off" style="width: 400px;" />&nbsp;&nbsp;<span
          style="color: red;" v-html="kong.producterTel"></span>
      </el-form-item>
      <el-form-item label="关键字" :label-width="formLabelWidth" v-model="formm.keywords">
        <el-input v-model="formm.keywords" autocomplete="off" style="width: 400px;" />&nbsp;&nbsp;<span
          style="color: red;" v-html="kong.keywords"></span>
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth" v-model="formm.producterAddress">
        <el-input v-model="formm.producterAddress" autocomplete="off" style="width: 400px;" />&nbsp;&nbsp;<span
          style="color: red;" v-html="kong.producterAddress"></span>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio-group v-model="formm.status">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">停用</el-radio>
        </el-radio-group>&nbsp;&nbsp;<span style="color: red;" v-html="kong.status"></span>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click=tiaojian()>添加</el-button>
        <el-button type="primary" @click="qvxiao()">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
